<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
const props = defineProps(["list"])
onMounted(
    () => {
        nextTick(()=>{
         let timer =  setTimeout(() => {
            init()
            clearTimeout(timer)
           }, 800);
        })
    }
)
function init() {
    console.log(props.list, "props.list");

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        legend: {
            // data: ['销量']
            orient: 'horizontal',
            x: 'left',
            y: 'top',
        },
        xAxis: {
            data: props.list.arrX
        },
        tooltip: {
            trigger: "item",
        },
        color: [
            "#47A8F7",
            "#7F80E9",
            "#F3A33A",
            "#05C978",
            "#627EEB",
            "#FF6262",
            "#F44336",
            "#E91E63",
            "#9C27B0",
            "#673BB7",
            "#3F51B5",
            "#3F89B5",
            "#2196F3",
            "#03A9F4",
            "#00BCD4",
            "#03B0A0",
            "#4CAF51",
            "#8BC44B",
            "#CEDC39",
            "#FFE56A",
            "#FFC108",
            "#FF9900",
            "#FF5822",
            "#795549",
            "#A5A5A5",
            "#76848B",
            "#616161",
            "#E03D8A",
            "#9C91C2",
            "#113285",
            "#AEA142",
            "#60D595",
            "#C78550",
            "#BE2A2D",
            "#67BBB7",
            "#268885",
            "#B481BB",
            "#C2328E",
        ],
        yAxis: {
            min: function (value: any) {
                return Math.floor(value.min - 1)
            },
            max: "dataMax",
        },
        series: [
            {
                type: 'line',
                data: props.list.arrY,
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
</script>

<template>
    <div id="main" style="width: 100%; height: 400px;"></div>
</template>

<style scoped></style>
